import React from 'react';
import './CompanyInfo.css'
import { Row, Col,Input,Button,Select,Cascader,message,Upload} from 'antd';
import { LoadingOutlined, PlusOutlined,DeleteFilled} from '@ant-design/icons';
import axios from '../../util/http'
import * as url from '../../util/api'
const { TextArea } = Input;
const { Option } = Select;
//图片转码
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
//图片大小
function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('仅支持JPG/PNG格式!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
}
// const layout = {
//     labelCol: { span: 6 },
//     wrapperCol: { span: 18 },
// };
//
// const validateMessages = {
//     required: '${label}不能为空',
//     types: {
//         email: '${label} 格式错误',
//         number: '${label} is not a validate number!',
//     },
//     number: {
//         range: '${label} must be between ${min} and ${max}',
//     },
// };

class CompanyInfo extends React.Component {
    constructor(){
        super();
        this.state={
            loading: false,
            //行业类别
            industryCategoriesSelectList:[
                {value:'汽车用品',name:'汽车用品'},
                {value:'手机数码',name:'手机数码'},
                {value:'食品酒水饮料',name:'食品酒水饮料'},
                {value:'电子机电',name:'电子机电'},
                {value:'家用电器',name:'家用电器'},
                {value:'个护化妆品',name:'个护化妆品'},
                {value:'钟表珠宝',name:'钟表珠宝'},
                {value:'家具家装',name:'家具家装'},
                {value:'服装鞋帽箱包',name:'服装鞋帽箱包'},
                {value:'其他行业',name:'其他行业'},
                {value:'日用百货',name:'日用百货'},
                {value:'母婴用品',name:'母婴用品'},
                {value:'生鲜农贸',name:'生鲜农贸'},
                {value:'餐饮连锁',name:'餐饮连锁'},
                {value:'医药行业',name:'医药行业'},
            ],
            //区域
            optionsLocations:[
                {
                    value: '中国',
                    label: '中国',
                    children: [
                        {
                            value: '北京市',
                            label: '北京市',
                            children:[
                                {
                                    value: '北京市',
                                    label: '北京市',
                                    children: [
                                        {value: '东城区', label: '东城区'},
                                        {value: '西城区', label: '西城区'},
                                        {value: '文区', label: '文区'},
                                        {value: '宣武区', label: '宣武区'},
                                        {value: '朝阳区', label: '朝阳区'},
                                        {value: '丰台区', label: '丰台区'},
                                        {value: '石景山区', label: '石景山区'},
                                        {value: '门头沟', label: '门头沟'},
                                        {value: '房山区', label: '房山区'},
                                        {value: '通州区', label: '通州区'},
                                        {value: '顺义区', label: '顺义区'},
                                        {value: '昌平区', label: '昌平区'},
                                        {value: '大兴区', label: '大兴区'},
                                        {value: '怀柔区', label: '怀柔区'},
                                        {value: '平谷区', label: '平谷区'},
                                        {value: '密云区', label: '密云区'},
                                        {value: '延庆县', label: '延庆县'},
                                    ],
                                }
                            ],

                        },
                        {
                            value: '天津市',
                            label: '天津市',
                            children:[
                                {
                                    value: '天津市',
                                    label: '天津市',
                                    children: [
                                        {value: '和平区', label: '和平区'},
                                        {value: '河东区', label: '河东区'},
                                        {value: '河西区', label: '河西区'},
                                        {value: '南开区', label: '南开区'},
                                        {value: '河北区', label: '河北区'},
                                        {value: '红桥区', label: '红桥区'},
                                        {value: '塘沽区', label: '塘沽区'},
                                        {value: '汉沽区', label: '汉沽区'},
                                        {value: '大港区', label: '大港区'},
                                        {value: '东丽区', label: '东丽区'},
                                        {value: '西青区', label: '西青区'},
                                        {value: '津南区', label: '津南区'},
                                        {value: '北辰区', label: '北辰区'},
                                        {value: '武清区', label: '武清区'},
                                        {value: '宝坻区', label: '宝坻区'},
                                    ],
                                }
                            ],

                        },

                    ],
                },
                {
                    value: '其他区域',
                    label: '其他区域',
                }
            ],
            //基础信息
            //basicInformationData:{
                companyName:'易订货',//公司名称
                industryCategories:'',//行业类别
                location:[],//区域
                zipCode:'518000',//邮编
                contactsMan:'陈先生',//联系人
                contactsPosition:'',//联系人职位
                contactsPhone:'13760336952',//手机
                contactsQQ:'',//QQ
                contactsEmail:'pm@77ircloud.com',//Email
                companyLogo:'',//logo
                detailedAddress:'科技园北区清华信息港研发楼B座10层',//详细地址
                telephone:'400-998-7255',//电话
                fax:'',//传真
                companyWebsite:'www.dinghuo123.com',//网址
                companyIntroduction:'深圳市铱云云计算有限公司（简称铱云科技）成立于2013年8月，' +
                    '是新商业软件时代最具影响力的云供应链中国软件服务商。致力于帮助高成长性企业强化与外部客户关系的' +
                    '生意协作与全渠道营销模式创新，让生意更简单！',//简介

            //},
            //财务信息
            //financialInformation:{
                taxpayerIdentificationNumber:'YDH008',//纳税人识别号
                invoiceTitle:'易订购',//发票抬头
            //},
            //服务支持设置
            //serviceSupportSettings:{
                serviceHotLine:'4009987255',//服务热线
                externalContact:[],//对外联系人
            //}
            listA:[],
        }
    };
    //图片上传
    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    companyLogo:imageUrl,
                    loading: false,
                }),
            );
        }
    };
    //行业类别改变
    typeSelectChange =(value) =>{
        //console.log(`selected ${value}`)
        this.setState({
            industryCategories:value,
        },()=>{console.log(this.state.industryCategories)})
    }
    //区域改变
    onLocationChange = (value) =>{
        this.setState({
            location:value,
        },()=>{console.log(this.state.location)})
    }
    //输入框内容改变
    onInputChange = (value,inputName)=>{
        //console.log(inputName)
        this.setState({
            [inputName]:value,
        },()=>{console.log(this.state[inputName])})
    };
    //验证不为空
    validationNotNull = ( value,inputName)=>{
        if(value === ''){
            message.error(`${inputName}不能为空!`);
        }
    };
    //添加对外联系人
    addExternalContact = ()=>{
        this.state.listA.push({name:'', phone:'', QQ:'', email:''})
        this.setState({
            externalContact:this.state.listA
        })
    };
    //改变对外联系人值
    changeExternalContactValue(i,value,inputName){
        //console.log(i,inputName)
        this.state.listA[i][inputName] = value;
        this.setState({
            externalContact:this.state.listA
        },()=>{console.log(this.state.externalContact)})
    }
    //删除联系人
    delExternalContact(index){
        let lists=this.state.externalContact;
        lists.splice(index,1);
        this.setState({externalContact:lists},()=>{console.log(this.state.externalContact)})
    }
    //保存
    serverComMeg =()=>{
        message.success('保存成功！');
        // // console.log(this.state);
        // let obj ={
        //
        // };
        // return axios({
        //     url:url.editCompanyInfo,
        //     method:'POST',
        //     data:obj
        // }).then(resp=>{
        //     console.log(resp);
        //     if(resp.data.code === 200){
        //         message.success('保存成功！');
        //     }else {
        //         message.error('保存失败！');
        //     }
        // })
    };
   //页面加载请求数据
    componentDidMount(){
        const userData = JSON.parse(sessionStorage.getItem('userdata'));  //获取当前登录用户信息
        let loginUser = { username: userData.username};
        return axios({
            url:url.getCompanyInfo,
            method:'POST',
            data:loginUser,
        }).then(resp=>{
            // console.log('获取公司信息');
            // console.log(resp)
        })
    }
    render() {
        const uploadButton = (
            <div>
                {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const { imageUrl } = this.state;
            return (
                <div className='companyInfoMain'>
                    <Row className="gutter-row-title">
                        <Col span={24}><span className='companyTitle'>基础信息</span></Col>
                    </Row>
                    <Row className="gutter-row">
                        <Col span={12}>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">公司名称</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入公司名称'
                                        value={this.state.companyName}
                                        onBlur={(e)=>this.validationNotNull(e.target.value,'公司名称')}
                                        onChange={(e)=>this.onInputChange(e.target.value,'companyName')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">行业类别</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Select
                                        defaultValue="其他行业"
                                        style={{ width:'100%'}}
                                        onChange={this.typeSelectChange}>
                                        {this.state.industryCategoriesSelectList.map(item=>{
                                            return <Option value={item.value} key={item.name}>{item.name}</Option>
                                        })}
                                    </Select>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">区域</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Cascader
                                        style={{ width:'100%'}}
                                        defaultValue={["中国", "北京市", "北京市","东城区"]}
                                        options={this.state.optionsLocations}
                                        onChange={this.onLocationChange}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">邮编</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入邮政编码'
                                        value={this.state.zipCode}
                                        onChange={(e)=>this.onInputChange(e.target.value,'zipCode')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">联系人</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入联系人'
                                        value={this.state.contactsMan}
                                        onBlur={(e)=>this.validationNotNull(e.target.value,'联系人')}
                                        onChange={(e)=>this.onInputChange(e.target.value,'contactsMan')}/>
                                </Col>
                                <Col span={4}><span className="gutter-col-span">职位</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入联系人职位'
                                        value={this.state.contactsPosition}
                                        onChange={(e)=>this.onInputChange(e.target.value,'contactsPosition')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">手机</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入联系人电话'
                                        value={this.state.contactsPhone}
                                        onBlur={(e)=>this.validationNotNull(e.target.value,'联系人电话')}
                                        onChange={(e)=>this.onInputChange(e.target.value,'contactsPhone')}/>
                                </Col>
                                <Col span={4}><span className="gutter-col-span">QQ</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入联系人QQ号码'
                                        value={this.state.contactsQQ}
                                        onChange={(e)=>this.onInputChange(e.target.value,'contactsQQ')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">邮箱</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入联系人邮箱'
                                        value={this.state.contactsEmail}
                                        onChange={(e)=>this.onInputChange(e.target.value,'contactsEmail')}/>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={12}>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">公司Logo</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleChange}>
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">详细地址</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入详细地址'
                                        value={this.state.detailedAddress}
                                        onBlur={(e)=>this.validationNotNull(e.target.value,'详细地址')}
                                        onChange={(e)=>this.onInputChange(e.target.value,'detailedAddress')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">电话</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入公司联系方式'
                                        value={this.state.telephone}
                                        onChange={(e)=>this.onInputChange(e.target.value,'telephone')}/>
                                </Col>
                                <Col span={4}><span className="gutter-col-span">传真</span></Col>
                                <Col span={8} className="gutter-col">
                                    <Input
                                        placeholder='请输入公司传真'
                                        value={this.state.fax}
                                        onChange={(e)=>this.onInputChange(e.target.value,'fax')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">公司网址</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入公司网址'
                                        value={this.state.companyWebsite}
                                        onChange={(e)=>this.onInputChange(e.target.value,'companyWebsite')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">公司介绍</span></Col>
                                <Col span={20} className="gutter-col">
                                    <TextArea
                                    placeholder="请输入公司介绍"
                                    autoSize={{ minRows: 5, maxRows: 10 }}
                                    onChange={(e)=>this.onInputChange(e.target.value,'companyIntroduction')}
                                    value={this.state.companyIntroduction}/>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="gutter-row-title">
                        <Col span={24}><span className='companyTitle'>财务信息</span></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">纳税人识别号</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入纳税人识别号'
                                        value={this.state.taxpayerIdentificationNumber}
                                        onChange={(e)=>this.onInputChange(e.target.value,'taxpayerIdentificationNumber')}/>
                                </Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">发票抬头</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入发票抬头'
                                        value={this.state.invoiceTitle}
                                        onChange={(e)=>this.onInputChange(e.target.value,'invoiceTitle')}/></Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="gutter-row-title">
                        <Col span={24}><span className='companyTitle'>服务支持设置</span></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">服务热线</span></Col>
                                <Col span={20} className="gutter-col">
                                    <Input
                                        placeholder='请输入服务热线'
                                        value={this.state.serviceHotLine}
                                        onBlur={(e)=>this.validationNotNull(e.target.value,'服务热线')}
                                        onChange={(e)=>this.onInputChange(e.target.value,'serviceHotLine')}/></Col>
                            </Row>
                            <Row className="gutter-row">
                                <Col span={4}><span className="gutter-col-span">对外联系人</span></Col>
                                <Col span={20} className="gutter-col">
                                    <div style={{backgroundColor:'#EFF1F8',height:'40px',textAlign:"center",lineHeight:'40px'}}>
                                        <Row>
                                            <Col span={5}><span >姓名</span></Col>
                                            <Col span={5} offset={1}><span >手机</span></Col>
                                            <Col span={5} offset={1}><span >QQ</span></Col>
                                            <Col span={5} offset={1}><span >邮箱</span></Col>
                                        </Row>
                                    </div>
                                </Col>
                            </Row>
                            {
                                 this.state.externalContact.map((item,i)=>{
                                    //console.log("i==="+i+"item"+item)
                                    return(
                                        <Row className="gutter-row" key={i}>
                                            <Col span={20} offset={4} className="gutter-col">
                                                <div>
                                                    <Row>
                                                        <Col span={5}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'name')}/></Col>
                                                        <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'phone')}/></Col>
                                                        <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'QQ')}/></Col>
                                                        <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'email')}/></Col>
                                                        <Col span={1}><div style={{width:'100%',height:'32px',lineHeight:'32px',textAlign:'center'}} onClick={()=>this.delExternalContact(i)}><DeleteFilled /></div></Col>
                                                    </Row>
                                                </div>
                                            </Col>
                                        </Row>
                                    )
                                })
                            }
                            <Row>
                                <Col offset={4} className="gutter-col"><div style={{cursor:'pointer'}} onClick={this.addExternalContact}><PlusOutlined/><span>增加对外联系人</span></div></Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <div style={{width: "100%", textAlign: "center", paddingTop: "32px"}} className='btnBox'>
                                <Button>取消</Button>
                                <Button type="primary"  onClick={this.serverComMeg}>保存</Button>
                            </div>
                        </Col>
                    </Row>
                </div>
            );
    }
}

export default CompanyInfo;